<template>
	<div class="realTimeChannelContent" :style="{width:realTimeServiceContent}">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'>
				<i class="icon iconfont">&#xe7d8;</i>
				当前位置/实时数据/
				<span>{{title}}</span>
			</div>
		</div>
		<div class="choose_dialog fadeInDown animated">
			<div class="block">
				<el-form class="demo-form-inline" :inline="true">
					<el-form-item label="查看日期：" :label-width="formLabelWidth">
						<el-date-picker v-model="date" align="left" placeholder="选择日期" @change='dateChange' :picker-options="pickerOptions">
						</el-date-picker>
					</el-form-item>
					<el-form-item class='conmit'>
						<el-button type="primary" icon="search" @click="search()" :disabled="searchable">查询</el-button>
					</el-form-item>
					<el-form-item>
						<span>&nbsp;&nbsp;&nbsp;&nbsp;（只能查看最近7天数据）数据更新频率为1分钟 ，最近一次更新时间为：{{nowDate}}，下表实时数据为0点截止更新时间点内数据汇总</span>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<div class="right_content">
			<div class="realTimeServiceTable" style='margin-bottom:40px;'>
				<div class="realTimeServiceTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						整体数据
					</span>
					<!-- 点击查看分小时详细数据 -->
					<el-button type="primary" size="mini" class="excel" @click="excel(allTabelHead,platformDatas,'实时数据-分渠道概况-整体数据',1)" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
						<i class="icon iconfont">&#xe7f0;</i> 导出excel
					</el-button>
				</div>
				<div class="realTimeServiceTableBody fadeIn animated">
					<template>
						<el-table v-loading="loading" element-loading-text="拼命加载中" :data="platformDatas" border :style="{width:realTimeServiceTableWidth}" :default-sort="{prop: 'channelid', order: 'descending'}">
							<el-table-column prop="platformid" label="平台名称" sortable width="160" fixed align="center"></el-table-column>
							<el-table-column prop="activate" label="激活设备" sortable width="160" align="center"></el-table-column>
							<el-table-column prop="newDevice" label="新增设备" sortable width="160" align="center"></el-table-column>
							<el-table-column prop="newUser" label="新增帐号" sortable width="160" align="center"></el-table-column>
							<el-table-column prop="activeUser" label="活跃帐号" sortable width="160" align="center"></el-table-column>
							<el-table-column prop="payUser" label="付费帐号" sortable width="160" align="center"></el-table-column>
							<el-table-column prop="pay" :label="'付费金额('+currency+')'" sortable width="160" align="center"></el-table-column>
							<el-table-column prop="payUserInActiveRadio" label="活跃付费率" sortable width="160" align="center"></el-table-column>
							<el-table-column prop="payARPU" :label="'付费ARPU('+currency+')'"sortable width="160" align="center"></el-table-column>
							<el-table-column prop="activeARPU" :label="'活跃ARPU('+currency+')'"sortable width="160" align="center"></el-table-column>
							<el-table-column prop="the2LeftRadio" :label="dateArr[0]+'用户次日留存率'" sortable width="160" align="center"></el-table-column>
							<el-table-column prop="the3LeftRadio" :label="dateArr[1]+'用户3日留存率'" sortable width="160" align="center"></el-table-column>
							<el-table-column prop="the3LeftRadio" :label="dateArr[2]+'用户7日留存率'" sortable width="160" align="center"></el-table-column>
							<el-table-column prop="the2MacLeftRadio" :label="dateArr[0]+'mac次日留存率'" sortable width="160" align="center"></el-table-column>
							<el-table-column prop="the3MacLeftRadio" :label="dateArr[1]+'mac3日留存率'" sortable width="160" align="center"></el-table-column>
							<el-table-column prop="the7MacLeftRadio" :label="dateArr[2]+'mac7日留存率'" sortable width="160" align="center"></el-table-column>
						</el-table>
					</template>
				</div>
			</div>

			<div class="realTimeServiceTable" style='margin-bottom:70px;'>
				<div class="realTimeServiceTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						分渠道数据
					</span>
					<span class="buttons">
						<el-button type="primary" size="small" :disabled="searchable" @click="getChannelData(0,'all')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
							全部平台
							<i class='el-icon-check' v-show='activeIndex == 0'></i>
						</el-button>
						<el-button type="primary" size="small" :disabled="searchable" @click="getChannelData(1,'2')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
							iOS
							<i class='el-icon-check' v-show='activeIndex == 1'></i>
						</el-button>
						<!-- <el-button type="primary" size="small"  :disabled="searchable" @click="getChannelData(2,'1')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
							iOS越狱 <i class='el-icon-check' v-show='activeIndex == 2'></i>
							</el-button> -->
						<el-button type="primary" size="small" :disabled="searchable" @click="getChannelData(3,'3')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
							安卓
							<i class='el-icon-check' v-show='activeIndex == 3'></i>
						</el-button>
						<el-button type="primary" size="small" icon="search" :disabled="searchable" @click="$refs.advance.filterShow=true">
							筛选渠道
						</el-button>

					</span>
					<!-- 点击查看分小时详细数据 -->
					<el-button type="primary" size="mini" class="excel" @click="excel(channelTabelHead,retlists,'实时数据-分渠道概况-分渠道数据',2)" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
						<i class="icon iconfont">&#xe7f0;</i> 导出excel
					</el-button>
				</div>
				<div class="realTimeServiceTableBody fadeIn animated">
					<template>
						<el-table v-loading="loading" element-loading-text="拼命加载中" :data="retlist" border :style="{width:realTimeServiceTableWidth}" @sort-change="sortChange">
							<el-table-column prop="channelid" label="渠道名称" sortable width="160" align="center" fixed>
								<template scope="scope">
									<el-tag type="primary" close-transition>{{scope.row.channelid}}</el-tag>
								</template>
							</el-table-column>
							<el-table-column prop="activate" label="激活设备" sortable width="160" align="center"></el-table-column>
							<el-table-column prop="newDevice" label="新增设备" sortable width="160" align="center"></el-table-column>
							<el-table-column prop="newActRate" label="新增激活转化率" sortable width="160" align="center"></el-table-column>
							<el-table-column prop="newUser" label="新增帐号" sortable width="160" align="center"></el-table-column>
							<el-table-column prop="activeUser" label="活跃帐号" sortable width="160" align="center"></el-table-column>
							<el-table-column prop="payUser" label="付费帐号" sortable width="160" align="center"></el-table-column>
							<el-table-column prop="pay" :label="'付费金额('+currency+')'" sortable width="160" align="center"></el-table-column>
							<el-table-column prop="payUserInActiveRadio" label="活跃付费率" sortable width="160" align="center"></el-table-column>
							<el-table-column prop="payARPU" :label="'付费ARPU('+currency+')'" sortable width="160" align="center"></el-table-column>
							<el-table-column prop="activeARPU" :label="'活跃ARPU('+currency+')'" sortable width="160" align="center"></el-table-column>
							<el-table-column prop="the2LeftRadio" :label="dateArr[0]+'用户次日留存率'" sortable width="230" align="center"></el-table-column>
							<el-table-column prop="the3LeftRadio" :label="dateArr[1]+'用户3日留存率'" sortable width="230" align="center"></el-table-column>
							<el-table-column prop="the7LeftRadio" :label="dateArr[2]+'用户7日留存率'" sortable width="230" align="center"></el-table-column>
							<el-table-column prop="the2LeftRadio" :label="dateArr[0]+'mac次日留存率'" sortable width="230" align="center"></el-table-column>
							<el-table-column prop="the3MacLeftRadio" :label="dateArr[1]+'mac3日留存率'" sortable width="230" align="center"></el-table-column>
							<el-table-column prop="the7MacLeftRadio" :label="dateArr[2]+'mac7日留存率'" sortable width="230" align="center"></el-table-column>
						</el-table>
					</template>
				</div>
				<div class="block realTimeServicePage">
					<el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :current-page="currentPage1" :page-sizes="pageSizes1" :page-size="pageSize1" layout="total, sizes, prev, pager, next, jumper" :total="dataTotal1"></el-pagination>
				</div>
			</div>

			<div class="realTimeServiceTable" style='margin-bottom:70px;'>
				<div class="realTimeServiceTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						渠道分小时数据
					</span>
					<el-select v-model="quota" size="small" placeholder="请选择指标" :disabled="searchable" @change='quotasChange'>
						<el-option v-for="item in quotas" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					<el-button type="primary" size="mini" class="excel" @click="excel(channelHourDatasHead,channelHourDatas,'实时数据-分渠道概况-渠道分小时数据',3)" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
						<i class="icon iconfont">&#xe7f0;</i> 导出excel
					</el-button>
				</div>
				<div class="realTimeServiceTableBody fadeIn animated">
					<template>
						<el-table v-loading="loading" element-loading-text="拼命加载中" :data="channelHourData" border :style="{width:realTimeServiceTableWidth}" @sort-change="sortChange2">
							<el-table-column align="center" v-for="(col,key) in channelHourDatasHead" sortable :prop="col.prop" :label="col.label" :key='col.prop'  width='150px'>
							</el-table-column>
						</el-table>
					</template>
				</div>
				<div class="block realTimeServicePage">
					<el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2" :current-page="currentPage2" :page-sizes="pageSizes2" :page-size="pageSize2" layout="total, sizes, prev, pager, next, jumper" :total="dataTotal2"></el-pagination>
				</div>
			</div>
			<div class="realTimeServiceTable" style='margin-bottom:40px;'>
				<div class="realTimeServiceTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						分渠道实时在线 ({{date}})
					</span>
					<el-button type="primary" :disabled="chooseable" size="small" @click="showGroup" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}' style='marginTop:6px;marginLeft:10px;'>
						<i class="el-icon-circle-check"></i> 请选择指标
					</el-button>
					<div class="realTimeData" v-loading="loading2" element-loading-text="拼命加载中" id='realTimeData'></div>
					<!-- <channelFilter></channelFilter> -->
					<el-dialog :visible.sync="dialogFormVisible" :close-on-click-modal='false' :show-close='false'>
						<div class="choose">
							<span>选择渠道：</span>
							<span>
								全选
								<el-switch on-text="" off-text="" v-model="delivery" @change='allChannels'></el-switch>
							</span>
						</div>
						<el-checkbox-group v-model="channel" @change='groupChange'>
							<el-checkbox :label="item.value" v-for="item in channels">{{item.label}}</el-checkbox>
						</el-checkbox-group>
						<div slot="footer" class="dialog-footer">
							<el-button @click="cancel">取 消</el-button>
							<el-button type="primary" @click="sure1">确 定</el-button>
						</div>
					</el-dialog>
				</div>
			</div>
		</div>
		<v-advance ref="advance" :channels='filterChannel' @get="filterFun"></v-advance>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./realTimeChannel.styl"></style>
<script src="./realTimeChannel.js"></script>
